<template>
  <!-- 评论组件 -->
  <div class="mod-comment">
    <div class="comment-hd">
      <h2 class="comment-title">评论</h2>
      <span class="comment-all">共{{ commentData.total }}条评论</span>
    </div>
    <div class="comment-input">
      <textarea
        class="comment-textarea"
        placeholder="评论"
        maxlength="140"
      ></textarea>
      <span class="comment-count">剩余140字</span>
      <el-button class="comment-publish" type="primary" size="small"
        >发表</el-button
      >
    </div>
    <div
      class="comment-main"
      v-if="commentData.hotComments && commentData.hotComments.length > 0"
    >
      <div class="comment-main-hd">
        <h3>精彩评论</h3>
      </div>
      <ul class="comment-list">
        <li
          class="comment-list-li"
          v-for="(item, index) in commentData.hotComments"
          :key="index"
        >
          <div class="comment-item">
            <div class="comment-item-head">
              <a
                href="javascript:;"
                class="user-head"
                @click="clickUser(item.user.userId)"
              >
                <img :src="item.user.avatarUrl" alt="" class="user-pic" />
              </a>
            </div>
            <div class="comment-item-main">
              <div class="comment-item-content">
                <a
                  href="javascript:;"
                  class="user-name"
                  @click="clickUser(item.user.userId)"
                  >{{ item.user.nickname }}</a
                >
                ：{{ item.content }}
              </div>
              <span class="comment-item-time">{{ item.time | showDate }}</span>
              <div class="comment-item-control">
                <a href="javascript:;">
                  <i class="iconfont">&#xe8b0;</i>
                  ({{ item.likedCount }})
                </a>
                <span class="sep">|</span>
                <a href="javascript:;">回复</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="comment-main">
      <div class="comment-main-hd">
        <h3>最新评论</h3>
        <span class="comment-all">({{ commentData.total }})</span>
      </div>
      <ul class="comment-list">
        <li
          class="comment-list-li"
          v-for="(item, index) in commentData.comments"
          :key="index"
        >
          <div class="comment-item">
            <div class="comment-item-head">
              <a
                href="javascript:;"
                class="user-head"
                @click="clickUser(item.user.userId)"
              >
                <img :src="item.user.avatarUrl" alt="" class="user-pic" />
              </a>
            </div>
            <div class="comment-item-main">
              <div class="comment-item-content">
                <a
                  href="javascript:;"
                  class="user-name"
                  @click="clickUser(item.user.userId)"
                >
                  {{ item.user.nickname }}</a
                >
                ：{{ item.content }}
              </div>
              <span class="comment-item-time">{{ item.time | showDate }}</span>
              <div class="comment-item-control">
                <a href="javascript:;">
                  <i class="iconfont">&#xe8b0;</i>
                  ({{ item.likedCount }})
                </a>
                <span class="sep">|</span>
                <a href="javascript:;">回复</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { formatDate } from "common/date.js";
export default {
  props: {
    commentData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  filters: {
    // 过滤器转换时间戳
    showDate(value) {
      let comTime = "";
      let d = Math.floor((new Date().getTime() - value) / 1000 / 60 / 60 / 24);
      let h = Math.floor(
        ((new Date().getTime() - value) / 1000 / 60 / 60) % 24
      );
      let m = Math.floor(((new Date().getTime() - value) / 1000 / 60) % 60);
      if (d > 0 || (d == 0 && h > 0)) {
        const date = new Date(value);
        comTime = formatDate(date, "yyyy-MM-dd hh:mm");
      } else {
        comTime = m + "分钟前";
      }
      return comTime;
    },
  },
  methods: {
    clickUser(id) {
      console.log(id);
      this.playUserDetail(id);
    },
  },
};
</script>

<style>
.mod-comment {
  position: relative;
  margin-bottom: 50px;
}
.comment-hd {
  position: relative;
  height: 64px;
  line-height: 64px;
}
.comment-title {
  float: left;
  font-weight: 400;
  font-size: 30px;
  margin-right: 15px;
}
.comment-all {
  font-size: 14px;
  color: #999;
}
.comment-input {
  position: relative;
  padding: 5px;
  height: 130px;
}
.comment-textarea {
  width: 100%;
  height: 80px;
  line-height: 20px;
  font-size: 14px;
  padding: 5px 6px;
  border-radius: 5px;
}
textarea {
  resize: none;
  overflow: auto;
}
.comment-count {
  position: absolute;
  right: 70px;
  bottom: 10px;
  font-size: 14px;
  color: #999;
}
.comment-publish {
  float: right;
}
.comment-main {
  position: relative;
  margin-top: 10px;
  margin-bottom: 50px;
}
.comment-main-hd {
  height: 50px;
  line-height: 50px;
  font-weight: 400;
}
.comment-main-hd h3 {
  float: left;
  font-weight: 400;
  margin-right: 15px;
}
.comment-list-li {
  border-top: 1px solid #ccc;
  padding: 15px 0;
}
.comment-item {
  position: relative;
  width: 100%;
}
.comment-item-head {
  float: left;
  width: 60px;
}
.mod-comment .user-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.comment-item-main {
  margin-left: 60px;
}
.comment-item-content {
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 14px;
  white-space: normal;
  overflow-wrap: break-word;
}
.comment-item-content .user-name {
  color: var(--color-theme);
}
.comment-item-time {
  font-size: 14px;
  color: #999;
}
.comment-item-control {
  float: right;
  font-size: 14px;
  margin-right: 10px;
}
.comment-item-control a:hover {
  color: var(--color-theme);
}
.sep {
  margin: 0 8px;
  color: #ccc;
}
</style>